<!--
 *
 * 　　┏┓　　　┏┓+ +
 * 　┏┛┻━━━┛┻┓ + +
 * 　┃　　　　　　　┃
 * 　┃　　　━　　　┃ ++ + + +
 *  ████━████ ┃+
 * 　┃　　　　　　　┃ +
 * 　┃　　　┻　　　┃
 * 　┃　　　　　　　┃ + +
 * 　┗━┓　　　┏━┛
 * 　　　┃　　　┃
 * 　　　┃　　　┃ + + + +
 * 　　　┃　　　┃
 * 　　　┃　　　┃ +  神兽保佑
 * 　　　┃　　　┃    代码无bug
 * 　　　┃　　　┃　　+
 * 　　　┃　 　　┗━━━┓ + +
 * 　　　┃ 　　　　　　　┣┓
 * 　　　┃ 　　　　　　　┏┛
 * 　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　┃┫┫　┃┫┫
 * 　　　　┗┻┛　┗┻┛+ + + +
 *
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-16 13:46:18
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-16 16:46:41
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <drawer-frame
    :title="`${user.name ? '编辑' : '新建'}用户`"
    @close="$emit('close')"
    @submit="handleSubmit"
  >
    <el-form ref="form" :model="model" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="model.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="model.gender">
          <el-radio label="MALE">男</el-radio>
          <el-radio label="FEMALE">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="numbers">
        <el-input
          v-model="model.numbers"
          type="textarea"
          placeholder="手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idNumber">
        <el-input v-model="model.idNumber" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="model.address" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="model.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="标签">
        <el-input
          v-model="model.tags"
          placeholder="多个标签用英文逗号隔开"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="model.remark"
          type="textarea"
          placeholder="备注"
        ></el-input>
      </el-form-item>
    </el-form>
  </drawer-frame>
</template>
<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      model: {
        address: '',
        email: '',
        gender: '',
        idNumber: '',
        name: '',
        numbers: '',
        remark: '',
        tags: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        gender: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change',
          },
        ],
        numbers: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    if (this.user.name) {
      this.model = {
        ...this.user,
        numbers: this.user.numbers.join('\n'),
        tags: this.user.tags.join(','),
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate()
    },
  },
}
</script>
